<!DOCTYPE html>
<html>
<head>
  <title>Tree View</title>
  <script src="./js//vue.js"></script>
  <script src="js/vendor/jquery-1.10.2.min.js"></script>
  <style>
    body {
      font-family: Menlo, Consolas, monospace;
      color: #444;
    }

    .item {
      cursor: pointer;
    }

    .bold {
      font-weight: bold;
    }

    ul {
      padding-left: 1em;
      line-height: 1.5em;
      list-style-type: dot;
    }

    li::marker {
      content: "";
    }
  </style>

  <script type="text/x-template" id="item-template">
      <li>
        <div
          :class="{bold: isFolder}"
          @click="toggle"
        >
        <img v-if="isFolder > 0" style="width:15px;height:15px" src="./images/folder.png">
        <img v-if="isFolder === undefined" style="width:15px;height:15px" src="./images/file.png">
          {{ item.name }}
          <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
        </div>
        <ul v-show="isOpen" v-if="isFolder">
          <tree-item
            class="item"
            v-for="(child, index) in item.children"
            :item="child"
          ></tree-item>
        </ul>
      </li>
    </script>
</head>

<body>
  <!-- the demo root element -->
  <ul id="demo">
    <tree-item class="item" :item="treeData"></tree-item>
  </ul>

  <script>
    Vue.component("tree-item", {
      template: "#item-template",
      props: {
        item: Object
      },
      data: function () {
        return {
          isOpen: true
        };
      },
      computed: {
        isFolder: function () {
          return this.item.children && this.item.children.length;
        }
      },
      methods: {
        toggle: function () {
          if (this.isFolder > 0) {
            alert("文件夹无法下载!")
          } else {
            window.location.href = "http://localhost:8080/downloadFile?file="+this.item.value;
          }
          if (this.isFolder) {
            this.isOpen = !this.isOpen;
          }
        }
      }
    });
    // boot up the demo
    var demo = new Vue({
      el: "#demo",
      data: {
        treeData: {}
      },
      created() {

        console.log("444")
        this.getDir()

      },
      methods: {
        getDir() {
          let that = this;
          $.ajax({
            url: "http://localhost:8080/readFiles",
            method: 'get',
            success: function (res) {
              var str = JSON.stringify(res);
              let data = { name: '目录结构', children: res }
              that.treeData = data
            }
          })
        }
      }
    });
  </script>
</body>

</html>